<template>
  <div class="flex gap-2">
    <Button @click="hadnleEdit" type="primary">编辑</Button>
    <MacroIconCtlModal
      v-model:visible="visible"
      :data="data"
      @success="handleSuccess"
      v-if="visible"
    />
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, PropType, watch } from 'vue';
  import { pluginManager } from '/@/views/formDesigner/utils';
  import MacroIconCtlModal from './MacroIconCtlModal.vue';

  const Button = pluginManager.getComponent('button');

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    record: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
  });
  // const data = computed({
  //   get() {
  //     console.log('props', props);
  //     console.log('props.modelValue', props.modelValue);
  //     return props.modelValue;
  //   },
  //   set(e) {
  //     console.log('eee', e);
  //     emit('update:modelValue', e);
  //   },
  // });
  const data = ref<Recordable[]>([]);
  watch(
    () => props.modelValue,
    (newVal) => {
      data.value = newVal;
    },
    {
      immediate: true,
    },
  );

  const visible = ref(false);
  const hadnleEdit = () => {
    visible.value = true;
  };
  const handleSuccess = (val) => {
    data.value = val;
    emit('update:modelValue', data.value);
  };
</script>
